<template>
  <el-tabs
    :value="rPath"
    type="card"
    class="tabs"
    :stretch="true"
    @edit="handleTabsEdit"
    @tab-click="handleClick"
  >
    <el-tab-pane
      v-for="item in tabsList"
      :key="item.path"
      :closable="item.title !== '工作台'"
      :label="item.title"
      :name="item.path"
    />
  </el-tabs>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState('navigation', ['tabsList']),
    rPath() {
      return this.$route.path
    }
  },
  methods: {
    ...mapMutations('navigation', ['delTabList']),
    handleTabsEdit(value) {
      this.delTabList(value)
    },
    handleClick(path) {
      this.$router.push(path.name)
    }
  }
}
</script>
<style lang="scss">
.el-tabs--card > .el-tabs__header {
  border: none;

  .el-tabs__item {
    border: none;
    font-size: 12px;
    background-color: #fff;
    color: #b5abab;
    margin-right: 10px;
    border-radius: 5px;
    height: 35px;
    line-height: 35px;
  }
  .el-tabs__item.is-active {
    color: #ffb200;
  }
  .el-tabs__nav {
    border: none;
    margin: 9px 0;
    padding: 0 10px;
  }
}
</style>

<style lang="scss" scoped>
.tabs {
  background: transparent;
}
</style>
